<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form v-model="listQuery" inline>
        <el-form-item label="">
          <el-select
            v-model="listQuery.category_id"
            size="small"
            default-first-option
            style="width: 200px"
            placeholder="分类能耗"
            clearable
            @change="change"
          >
            <el-option
              v-for="(item, index) in joinArr"
              :key="index"
              :label="item.name"
              :value="item.category_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="value1"
            size="small"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div style="display:inline">
            <el-radio-group v-model="radio" size="small">
              <el-radio-button label="日"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            查询
          </el-button>
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-download"
            @click="showCreate"
          >
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="stbox">
      <div class="wrapper-box three">
        <!-- <div class="title-content">
          <span>智慧环保监测与智能运维管理平台</span>
          <div>
            <el-button type="primary" size="small"
              >一键开关机流程状态</el-button
            >
            <el-button type="primary" size="small">一键开机</el-button>
            <el-button type="danger" size="small">一键关机</el-button>
            <el-button type="danger" size="small">全部关机</el-button>
            报警消音
            <el-switch v-model="value1" />
            <el-switch
              v-model="value1"
              active-text="远程手动模式"
              inactive-text="AI模式"
            />
          </div>
        </div> -->
        <div class="item-content">
          <div class="left">
            <el-tree
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </div>

          <div class="right">
            <!-- <imgSys /> -->
            <div class="table-container">
              <el-table
                key="tableList"
                v-loading="listLoading"
                :data="list"
                element-loading-text="加载中"
                border
                fit
                stripe
                highlight-current-row
                style="width: 100%"
                :header-cell-style="{
                  background: '#E3ECFB',
                  color: '#303133',
                  fontWeight: '500'
                }"
              >
                <el-table-column
                  align="center"
                  label="能源维度"
                  width="150"
                  sortable
                  prop="number"
                >
                  <template slot-scope="scope">
                    {{ scope.row.number }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="能源对象"
                  width="170"
                  sortable
                  prop="created_at"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.created_at }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  align="center"
                  label="时间维度"
                  class-name="overflow-on"
                >
                  <template slot-scope="scope">
                    {{ scope.row.title }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="能源用量"
                  class-name="overflow-on"
                >
                  <template slot-scope="scope">
                    {{ scope.row.phone }}
                  </template>
                </el-table-column>

                <el-table-column
                  align="center"
                  label="更新时间"
                  sortable
                  prop="updated_at"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.updated_at }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button plain type="info" size="small">
                      查看
                    </el-button>

                    <el-button
                      plain
                      v-if="scope.row.status == 0"
                      type="warning"
                      size="small"
                    >
                      去处理
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-container text-right">
                <el-pagination
                  background
                  :total="pagination.total"
                  :current-page="listQuery.page"
                  :page-size="listQuery.limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import imgSys from "./components/imgSys.vue";
export default {
  name: "Dashboard",
  components: { imgSys },
  data() {
    return {
      value1: null,
      listQuery: {
        page: 1,
        limit: 10,
        title: "",
        category_id: null
      },
      pagination: { total: 0 },
      joinArr: [{ name: "水" }, { name: "电" }, { name: "气" }, { name: "热" }],
      radio: "日",
      list: [
        {
          number: "水",
          created_at: "一幢用水量",
          title: "日",
          phone: "25吨",
          updated_at: "2024-11-12"
        }
      ],
      treeData: [
        {
          label: "办公建筑6幢",
          children: [
            {
              label: "二楼",
              children: [
                {
                  label: "201"
                }
              ]
            }
          ]
        },
        {
          label: "办公建筑8幢",
          children: [
            {
              label: "二楼",
              children: [
                {
                  label: "211"
                }
              ]
            },
            {
              label: "三楼",
              children: [
                {
                  label: "306"
                }
              ]
            }
          ]
        },
        {
          label: "办公建筑9幢",
          children: [
            {
              label: "一楼",
              children: [
                {
                  label: "109"
                }
              ]
            },
            {
              label: "二楼",
              children: [
                {
                  label: "209"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
    },

    handleCurrentChange(val) {
      this.listQuery.page = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.stbox {
  // padding: 15px;
  height: 100%;
  // overflow-y: auto;
}

.wrapper-box {
  height: 100%;
  background-color: #fff;

  .title-content {
    display: flex;
    justify-content: space-between;
    color: #000;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    background-color: #dfdfdf;

    // background-image: linear-gradient(to right, #0d3890, #173a8d);
    align-items: center;
  }

  .item-content {
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 50px);
    padding: 10px;

    .left {
      width: 20%;

      .el-tree {
        background: none;
        color: #000;
      }

      ::v-deep.el-tree-node__content {
        &:hover {
          background-color: #7ba0ff30;
        }
      }

      ::v-deep.el-tree-node.is-current > .el-tree-node__content {
        background-color: #7ba0ff30 !important;
        color: #0274ff;
      }

      .el-tree-node .is-expanded .is-focusable {
        background: none;
      }
    }

    .right {
      width: 80%;
      position: relative;

      img {
        width: 100%;
        object-fit: cover;
        // max-width: 100%;
        /* 最大宽度为父容器宽度的100% */
        // height: auto;
        /* 高度自动调整以保持图片比例 */
        // display: block;
        /* 使图片表现得像块级元素 */
      }

      span {
        color: #000;
        z-index: 999;
      }

      .wendu {
        position: absolute;
        top: 90%;
        left: 10%;
      }
    }
  }
}
</style>
